<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08_行高注意事项</title>
    <style>
        #atguigu {
            font-size: 40px;
            background-color: skyblue;
            line-height: 1.5;
        }
        /* 注意点2  行高可以继承的建议写数值*/
        span {
            font-size: 200px;
            color: orange;
        }

        /* 
         注意点3：height和line-height之间关系
         设置了height。就是height
         没有设置height，那就是height*行数
        */
       
        #atguigu1 {
            font-size: 40px;
            background-color: yellowgreen;
            line-height: 100px;
            height: 300px;
        }
        
        #atguigu2 {
            font-size: 40px;
            background-color: yellowgreen;
            line-height: 0px;
        }
        /* 行高的应用场景
        1、调整多行文字的行高 
        2、单行的文字的垂直居中
        */

        #atguigu3 {
            font-size: 40px;
            background-color: yellowgreen;
            line-height: 0px;
        }
    </style>
</head>
<body>
    <!-- <div id="atguigu">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigux<span>x尚硅谷</span>让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div> -->
    <!-- <div id="atguigu1">atguigu尚硅谷</div> -->
    <!-- <div id="atguigu2">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguiguxx尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div> -->
    <div id="atguigu3">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguiguxx尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>

</body>
</html>